import React from 'react';

export class AppClass extends React.Component {
  render() {
    // this.props.age = 28; // props属性不能修改的
    // this.props.obj = {}; // 赋值一个新对象也是不行的
    // this.props.likes = []; // 赋值一个新数组也是不行的
    this.props.likes[0] = '喝水';
    this.props.obj.name = '肉丝';
    return (
      <div>
        <div>{this.props.name}</div>
        <div>{this.props.age}</div>
        <div>{this.props.likes.join('=>')}</div>
        <div>
          {this.props.likes.map((item, index) => {
            return <h3 key={index}>{item}</h3>;
          })}
        </div>
        <div>
          {this.props.obj.name}, {this.props.obj.age}
        </div>
        <div>{this.props.fn('你好')}</div>
        <div>{this.props.jsx}</div>
      </div>
    );
  }
}

// export const AppFn = ({ name, age, likes, obj, fn, jsx }) => {
//   return (
//     <div>
//       <div>{name}</div>
//       <div>{age}</div>
//       <div>{likes.join('=>')}</div>
//       <div>
//         {likes.map((item, index) => {
//           return <h3 key={index}>{item}</h3>;
//         })}
//       </div>
//       <div>
//         {obj.name}, {obj.age}
//       </div>
//       <div>{fn('你好')}</div>
//       <div>{jsx}</div>
//     </div>
//   );
// };

export const AppFn = (props) => {
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.age}</div>
      <div>{props.likes.join('=>')}</div>
      <div>
        {props.likes.map((item, index) => {
          return <h3 key={index}>{item}</h3>;
        })}
      </div>
      <div>
        {props.obj.name}, {props.obj.age}
      </div>
      <div>{props.fn('你好')}</div>
      <div>{props.jsx}</div>
    </div>
  );
};
